<template>
  <div class="analytics">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>销售趋势</span>
          </template>
          <div class="chart-placeholder">
            <i class="el-icon-s-marketing" style="font-size: 48px; color: #409EFF;"></i>
            <p>销售趋势图表</p>
            <p>这里可以集成 ECharts 等图表库</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>用户分布</span>
          </template>
          <div class="chart-placeholder">
            <i class="el-icon-pie-chart" style="font-size: 48px; color: #67C23A;"></i>
            <p>用户分布饼图</p>
            <p>这里可以集成 ECharts 等图表库</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>数据统计</span>
          </template>
          <el-descriptions :column="4" border>
            <el-descriptions-item label="今日访问">{{ stats.todayVisits }}</el-descriptions-item>
            <el-descriptions-item label="本周访问">{{ stats.weekVisits }}</el-descriptions-item>
            <el-descriptions-item label="本月访问">{{ stats.monthVisits }}</el-descriptions-item>
            <el-descriptions-item label="总访问量">{{ stats.totalVisits }}</el-descriptions-item>
            <el-descriptions-item label="转化率">{{ stats.conversionRate }}</el-descriptions-item>
            <el-descriptions-item label="平均停留时间">{{ stats.avgStayTime }}</el-descriptions-item>
            <el-descriptions-item label="跳出率">{{ stats.bounceRate }}</el-descriptions-item>
            <el-descriptions-item label="复购率">{{ stats.repurchaseRate }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Analytics',
  data() {
    return {
      stats: {
        todayVisits: 1234,
        weekVisits: 8765,
        monthVisits: 34567,
        totalVisits: 123456,
        conversionRate: '3.2%',
        avgStayTime: '2分30秒',
        bounceRate: '45.6%',
        repurchaseRate: '28.9%'
      }
    }
  }
}
</script>

<style scoped>
.analytics { padding: 20px; }
.chart-placeholder { text-align: center; padding: 40px; color: #666; }
.chart-placeholder p { margin: 10px 0; }
</style>
